<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
			<hx-navbar title="我的奖励" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto"></hx-navbar>
			<view class="container">
				<view class="tab_box">
					<template v-for="(item, index) in tabList">
						<view class="tab_dd" :style="item.id == tabCurrent? [selStyle]:[tabNormaleStyle]"
							:class="{'tabActive':item.id == tabCurrent}" :key="index" @tap="set_tab(item.id)">
							<text>{{item.name}}</text>
						</view>
					</template>
				</view>
				<view class="c_tab_list">
					<!-- 未领取 -->
					<view class="" v-if="tabCurrent===1">
						<view class="unclaimed">
							<view class="line"
								:class="[{'wire_black':ktheme =='black'},{'wire_purple':ktheme =='purple'}]"
								v-for="(item,index) in notList" style="">
								<view class="head_portrait">
									<image :src="item.image" style="width: 114rpx;height: 138rpx;" mode=""></image>
								</view>
								<view class="c_tab_container">
									<view class="cont_name">
										{{item.name}}
									</view>
									<view class="cont_value">
										<text class="price"
											:class="[{'cont_value_pirple':ktheme=='purple'},{'cont_value_black':ktheme=='black'}]">初始价值￥{{(Math.floor(item.price / 100)) || 0}}</text>
										<view class="btntk" @click="getshop(item)" :style="{background:kbuttonBgColor}"
											style="color: white;">
											去领取
										</view>
									</view>
									<view class="cont_num">x{{item.num}}</view>
									<view class="cont_num" :style="{'color':kselectColorSize}">{{unfrozeDate(item)}}
									</view>
								</view>
							</view>
						</view>
						<view class="xget" :style="{'color': (ktheme != 'purple' ? '#ffffff':'#000')}"
							v-if="buyList.length!==0">
							以下奖品需要在平台购买任意数字科技商品才可领取
						</view>

						<view class="unclaimed">
							<view class="line"
								:class="[{'wire_black':ktheme =='black'},{'wire_purple':ktheme =='purple'}]"
								v-for="(item,index) in buyList" style="filter: grayscale(80%);">
								<view class="head_portrait">
									<image :src="item.image" style="width: 114rpx;height: 138rpx;" mode=""></image>
								</view>
								<view class="c_tab_container">
									<view class="cont_name">
										{{item.name}}
									</view>
									<view class="cont_value">
										<text class="price"
											:class="[{'cont_value_pirple':ktheme=='purple'},{'cont_value_black':ktheme=='black'}]">初始价值￥{{(Math.floor(item.price / 100)) || 0}}</text>
										<view class="btntk" @click="getshop(item)" :style="{background:kbuttonBgColor}"
											style="color: white;">
											去领取
										</view>
									</view>
									<view class="cont_num">
										x{{item.num}}
									</view>
									<view class="cont_num" :style="{'color':kselectColorSize}">{{unfrozeDate(item)}}
									</view>
								</view>
							</view>
						</view>
						<view style="text-align: center;" v-if="(!notList) || (notList && notList.length===0)">
							<view class="" v-if="(!buyList) || (buyList && buyList.length===0)">
								<image src="@/static/without.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<!-- 已领取 -->
					<view class="get" v-if="tabCurrent===2">
						<view class="line get_back"
							:class="[{'get_back_purple':ktheme=='purple'},{'get_back_black':ktheme=='black'}]"
							v-for="(item,index) in getsList">
							<view class="head_portrait">
								<image :src="item.image" style="width: 114rpx;height: 138rpx;" mode="aspectFit"></image>
							</view>
							<view class="c_tab_container">
								<view class="cont_name">
									{{item.name}}
								</view>
								<view class="cont_value">
									<text class="price"
										:class="[{'cont_value_pirple':ktheme=='purple'},{'cont_value_black':ktheme=='black'}]">初始价值￥{{(Math.floor(item.price / 100)) || 0}}</text>
									<view class="btntk" @click="syClick()" :style="{background:kbuttonBgColor}"
										style="color: white;">
										去查看
									</view>
								</view>
								<view class="cont_num">
									x{{item.num}}
								</view>
								<view class="cont_num" :style="{'color':kselectColorSize}">{{unfrozeDate(item)}}</view>
							</view>
						</view>
						<view style="text-align: center;" v-if="(!getsList) || (getsList && getsList.length===0)">
							<image src="@/static/without.png" mode="widthFix"></image>

						</view>
					</view>
					<!-- 实名 -->
					<uni-popup ref="tismPopup" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'"
						:isMaskClick="false">
						<view class="store-view store-border-all tips-padding"
							:style="{'background':kbackgroundColor,color:knormalColor}"
							:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
							<text class="popup-title">提醒</text>
							<text class="popup-subtitle">为保障您可以顺利领取奖励，请先进行实名，实名成功后，才可进行。</text>
							<view class="tips-bottom">
								<view class="tips-button"
									:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
									@click="cancelAward()">放弃奖励</view>
								<view class="tips-button" :style="{background:kbuttonBgColor}" @click="openkh()">去开户
								</view>
							</view>
						</view>
					</uni-popup>
					<!-- 开户 提醒 -->
					<uni-popup ref="tikhPopup" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'"
						:isMaskClick="false">
						<view class="store-view store-border-all tips-padding"
							:style="{'background':kbackgroundColor,color:knormalColor}"
							:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
							<text class="popup-title">提醒</text>
							<text class="popup-subtitle">为保障您可以顺利领取奖励，请先进行开户，开户成功后，奖品将发放到您的金世界账户中。</text>
							<view class="tips-bottom">
								<view class="tips-button"
									:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
									@click="cancelAward()">放弃奖励</view>
								<view class="tips-button" :style="{background:kbuttonBgColor}" @click="openAccount()">
									去开户</view>
							</view>
						</view>
					</uni-popup>
					<!-- 购买 提醒 -->
					<uni-popup ref="noBuyPopup" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'"
						:isMaskClick="false">
						<view class="store-view store-border-all tips-padding"
							:style="{'background':kbackgroundColor,color:knormalColor}"
							:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
							<text class="popup-title">提醒</text>
							<text class="popup-subtitle">以下奖品需要在一级市场购买任意藏品，购买后可领取</text>
							<view class="tips-bottom">
								<view class="tips-button"
									:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
									@click="closeNoBuyAward()">取消</view>
								<view class="tips-button" :style="{background:kbuttonBgColor}" @click="pushHome()">
									去购买</view>
							</view>
						</view>
					</uni-popup>
					<!-- 领取成功 -->
					<uni-popup ref="awardSuccessPopup" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'"
						:isMaskClick="false">
						<view class="store-view store-border-all"
							:style="{'background':kbackgroundColor,color:knormalColor}"
							:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
							<view class="freeze-row store-border-top">
								<image class="freeze-icon" src="../../static/free/freeze-icon.png" mode="aspectFit">
								</image>
								<text class="freeze-text">冻结{{dayCount || 0}}天</text>
							</view>
							<text class="popup-title">领取成功</text>
							<view class="store-item">
								<image class="store-image" :src="recivedItem.image"></image>
								<view class="store-column">
									<text class="store-title">{{recivedItem.name || ''}}</text>
									<text class="store-number">x{{recivedItem.num || 0}}</text>
								</view>
								<image class="award-success-icon" src="../../static/free/award-success-icon.png"
									mode="aspectFit"></image>
							</view>
							<view class="tips-bottom">
								<view class="tips-button"
									:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
									@click="closeAward()">关闭</view>
								<view class="tips-button" :style="{background:kbuttonBgColor}"
									@click="showArtGood(recivedItem)">查看藏品</view>
							</view>
						</view>
					</uni-popup>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recivedItem: {},
				tabCurrent: 1,
				tabList: [{
					id: 1,
					name: '未领取'
				}, {
					id: 2,
					name: '已领取'
				}],
				dayCount: "",
				notList: [], //未获取
				getsList: [], //以获取
				buyList: [], //需要购买获取
				wuLlist: false,
				list: []
			};
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		methods: {
			unfrozeDate(item) {
				let date = ''
				// 将日期设置为后一天的0点0分0秒0毫秒
				const now = new Date();
				now.setHours(0, 0, 0, 0);
				now.setDate(now.getDate() + 1);
				let beforeTimes = Math.floor(now);
				var nextDayTimestamp = Math.floor(item.unfrozeDate) + Math.floor(24 * 60 * 60 * 1000); // 一天的毫秒数
				let remainingSeconds = nextDayTimestamp - beforeTimes;
				var day = Math.floor(remainingSeconds / (24 * 3600 * 1000))
				if (day > 0) {
					date = '剩余冻结时间:' + day + '天'
				} else {
					date = '解冻时间：' + this.filterTime(nextDayTimestamp)
				}
				return date
			},
			filterTime(val) {
				return uni.$u.timeFormat(parseInt(val), 'yyyy-mm-dd')
			},
			getshop(item) {
				this.recivedItem = item
				let data = {
					mfhId: item.mfhId,
					iid: item.iid,
					token: this.$db.get('userToken')
				}

				/**NOT_CERTIFIED(52002, "未实名认证"),
				 * USER_NOT_ACCOUNT(52011, "用户未开户"),
				 */
				this.$api.mfvAccessByMfhId(data, res => {
					if (res.code == 0) {
						//订单非已审核状态
						this.$refs.awardSuccessPopup.open()
						// 计算冻结时间
						this.dayCount = 0;
						let currentTimestamp = Math.floor(Date.now());
						let remainingSeconds = item.unfrozeDate - currentTimestamp;
						if (remainingSeconds > 0) {
							var day = Math.floor(remainingSeconds / (24 * 3600 * 1000))
							this.dayCount = day
						}
						this.getList()
					} else if (res.code == 52002) {
						// 未实名
						this.$refs.tismPopup.open()
					} else if (res.code == 52011) {
						// 用户未开户
						this.$refs.tikhPopup.open()
					} else if (res.code == 59004) {
						// 用户未在一级市场购买过藏品
						this.$refs.noBuyPopup.open()
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			//去购买
			pushHome() {
				this.$refs.noBuyPopup.close()
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			syClick(val) {
				uni.navigateTo({
					url: '/pages/collection/collection'
				})
			},
			getList() {
				this.$api.mfvgetByUid(res => {
					if (res.status) {
						this.getsList = res.data.true //已领取
						// 遍历最近以获取跟未获取进行最近 需要购买获取的商品
						var needBuyList = []
						var noNeedBuyList = []
						for (let s of res.data.false) {
							if (s.needBuy === true) {
								needBuyList.push(s)
							} else {
								noNeedBuyList.push(s)
							}
						}
						this.buyList = needBuyList
						this.notList = noNeedBuyList
					} else if (res.code == 59001) {
						// this.wuLlist = true
					} else if (res.code == 59007) {
						this.wuLlist = true
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			// 奖励弹窗
			showAwardAlertView() {
				this.$refs.awardPopup.open()
			},
			// 提醒弹窗
			showTipsAlertView() {
				this.$refs.tipsPopup.open()
			},
			// 领取成功
			showAwardSuccessAlertView() {
				this.$refs.awardSuccessPopup.open()
			},
			// 放弃奖励
			cancelAward() {
				this.$refs.tismPopup.close()
				this.$refs.tikhPopup.close()
			},
			// 去开户
			openAccount() {
				this.$api.hfwallet(res => {
					if (res.status) {
						let url = res.data.url;
						// #ifdef H5
							window.location.href = url;
						// #endif
						// #ifdef APP-PLUS
							uni.navigateTo({
								url: '/pages/user/webview/webview?url=' + url
							})
						// #endif
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
				this.$refs.tipsPopup.close()
			},
			//实名
			openkh() {
				uni.navigateTo({
					url: "/pages/user/apply/apply"
				})
				this.$refs.tikhPopup.close()
			},
			// 关闭奖励成功弹窗
			closeAward() {
				this.$refs.awardSuccessPopup.close()
			},
			// 关闭购买过藏品弹窗
			closeNoBuyAward() {
				this.$refs.noBuyPopup.close()
			},
			// 查看藏品
			showArtGood(item) {
				uni.navigateTo({
					url: `/pages/index/details?id=${item.iid || 0}`
				})
				this.$refs.awardSuccessPopup.close()
			},
			change_hanlder() {
				this.$refs.storePopup.close()
			},
			colsehintpopup() {
				this.$refs.hintpopup.close();
			},
			comhintpopup() {
				uni.navigateTo({
					url: "/pages/user/apply/apply"
				})
				this.$refs.hintpopup.close()
			},
			//切换
			set_tab(id) {
				this.tabCurrent = id
			}
		}
	}
</script>

<style lang="scss">
	.tab_box {
		width: 100%;
		padding: 30rpx 70rpx 0;
		display: flex;
		align-items: center;
		// justify-content: space-between;

		justify-content: space-around;

		.tab_dd {
			font-size: 32rpx;
			color: var(--tabNormalColor);
			font-weight: 400;
			position: relative;
		}

		.tabActive {
			// color: #863A3A;
			color: var(--selectColorSize);
			font-weight: bold;
		}

		.tabActive::after {
			display: block;
			clear: both;
			content: '';
			width: 65%;
			height: 10rpx;
			// background:red;
			background: var(--selBcakborder);
			border-radius: 100rpx;
			position: absolute;
			left: 50%;
			bottom: -16rpx;
			transform: translateX(-50%);
		}

	}

	.c_tab_list {
		width: 690rpx;
		height: 100%;
		padding: 10rpx;
		margin: 20rpx auto;
	}

	.wire_black {
		border: 6rpx solid transparent;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		border-radius: 20rpx;
		background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(180deg, rgba(244, 249, 123, 1), rgba(84, 203, 122, 1));

	}

	.wire_purple {
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.get_back_black {
		background: url('@/static/free/get_back_black.png') no-repeat;
		background-size: 100% 100%;
	}

	.get_back_purple {
		background: url('@/static/free/get_back_purple.png') no-repeat;
		background-size: 100% 100%;
	}

	.line {
		padding: 20rpx 40rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.head_portrait {
		// margin: auto;
		width: 124rpx;
		height: 138rpx;
		// border: 1px solid aqua;
	}

	.c_tab_container {
		display: flex;
		flex-direction: column;
		width: 75%;
		// width: 280rpx;
		// margin-left: 20rpx;
		line-height: 1.7;
		position: relative;
	}

	.right_list {
		width: 200rpx;
	}

	.cont_name {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 30rpx;
		color: #333333;
	}

	.cont_value_purple {
		background: rgba(205, 165, 250, 0.2);
		border: 2rpx solid #CDA5FA;
		color: #CDA5FA;
	}

	.cont_value_black {
		border: 2rpx solid;
		color: #58CC7B;
		background: rgba(88, 204, 123, 0.2);
	}

	.cont_value {
		display: flex;
		flex-direction: row;
		align-items: center;
		// margin-right: auto;

		.price {
			padding: 3rpx 10rpx;
			text-align: left;
			border-radius: 10rpx;
		}


		.btntk {
			margin-left: auto;
			width: 184rpx;
			height: 68rpx;
			// margin: 30rpx auto 40rpx;
			border-radius: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.cont_num {
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
	}

	.xget {
		width: 608rpx;
		margin: 50rpx auto;
		height: 44rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
	}

	.alert-border-purple {
		box-shadow: 2rpx 2rpx 12rpx 4rpx #51515166 !important;
		box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(254, 162, 221, 0.91) !important;
		background-color: #fff !important;
	}

	.alert-border-black {
		border: 1px solid #FFD38C;
	}

	.alert-border-shadow-black {
		// box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(88, 204, 123, 0.9) !important;
	}

	.store-border-top {
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	.store-border-all {
		border-radius: 40rpx;
	}

	.tips-padding {
		margin: 0 40rpx;
	}

	.store-view {
		display: flex;
		flex-direction: column;
		margin-bottom: -6rpx;

		.tips-bottom {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			margin: 0 40rpx 40rpx 40rpx;

			.tips-button {
				padding: 20rpx 0;
				width: 240rpx;
				text-align: center;
				border-radius: 40rpx;
			}

			.tips-cancel-bg-black {
				border: 2rpx #1CBC4D solid;
				background: #333333;
			}

			.tips-cancel-bg-white {
				border: 2rpx #999999 solid;
				background: white;
			}
		}

		.freeze-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			background: rgba(255, 0, 0, 0.50);
			padding: 14rpx 40rpx;

			.freeze-icon {
				width: 34rpx;
				height: 28rpx;
			}

			.freeze-text {
				color: #EA4729;
				margin-left: 20rpx;
			}
		}

		.popup-title {
			width: 100%;
			margin-top: 40rpx;
			text-align: center;
		}

		.popup-subtitle {
			font-size: 28rpx;
			padding: 40rpx;
		}

		.store-item {
			padding: 20rpx 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.store-image {
				width: 92rpx;
				height: 92rpx;
			}

			.store-column {
				display: flex;
				flex-direction: column;
				margin: 0 20rpx;
				position: relative;

				.store-title {
					word-break: break-all;
					width: 200rpx;
					font-size: 30rpx;
				}

				.store-tag {
					padding: 8rpx 20rpx;
					font-size: 24rpx;
					margin-top: 4rpx;
					margin-right: auto;
				}

				.store-number {
					margin-top: 4rpx;
					font-size: 24rpx;
				}
			}

			.award-success-icon {
				width: 200rpx;
				height: 160rpx;
			}

			.store-buy {
				margin-left: auto;
				padding: 8rpx 40rpx;
				border-radius: 46rpx;
				font-size: 26rpx;
			}

			.store-buy-black {
				border-radius: 8rpx;
				border: 2rpx #58CC7B solid;
				background-color: rgba(88, 204, 123, 0.20);
				color: #58CC7B;
			}

			.store-buy-white {
				border-radius: 8rpx;
				border: 2rpx #999999 solid;
				background-color: white;
				color: #333333;
			}
		}
	}
</style>